<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta charset="utf-8">
	<title>智能“小黄”后台监管平台</title>
	<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
	<link rel="icon" href="../assets/img/icon.ico" type="image/x-icon"/>
	
	<!-- Fonts and icons -->
	<script src="../assets/js/plugin/webfont/webfont.min.js"></script>
	<script>
		WebFont.load({
			google: {"families":["Open+Sans:300,400,600,700"]},
			custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands"], urls: ['../assets/css/fonts.css']},
			active: function() {
				sessionStorage.fonts = true;
			}
		});
	</script>

	<!-- CSS Files -->
	<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/css/azzara.min.css">
	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link rel="stylesheet" href="../assets/css/demo.css">
</head>
<body>
	<div class="wrapper">
		<!--
			Tip 1: You can change the background color of the main header using: data-background-color="blue | purple | light-blue | green | orange | red"
		-->
		<div class="main-header" data-background-color="orange">
			<!-- Logo Header -->
			<div class="logo-header">
				
				<a href="homepage.html" class="logo">
					<img src="../assets/img/logoazzara.svg" height="100%" alt="navbar brand" class="navbar-brand">
				</a>
				<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<i class="fa fa-bars"></i>
					</span>
				</button>
				<button class="topbar-toggler more"><i class="fa fa-ellipsis-v"></i></button>
				<div class="navbar-minimize">
					<button class="btn btn-minimize btn-rounded">
						<i class="fa fa-bars"></i>
					</button>
				</div>
			</div>
			<!-- End Logo Header -->

			<!-- Navbar Header -->
			<nav class="navbar navbar-header navbar-expand-lg">
				
				<div class="container-fluid">
					<div class="collapse" id="search-nav">
						<form class="navbar-left navbar-form nav-search mr-md-3">
							<div class="input-group">
								<div class="input-group-prepend">
									<button type="submit" class="btn btn-search pr-1">
										<i class="fa fa-search search-icon"></i>
									</button>
								</div>
								<input type="text" placeholder="搜索 ..." class="form-control">
							</div>
						</form>
					</div>
					<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
						<li class="nav-item toggle-nav-search hidden-caret">
							<a class="nav-link" data-toggle="collapse" href="#search-nav" role="button" aria-expanded="false" aria-controls="search-nav">
								<i class="fa fa-search"></i>
							</a>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="fa fa-envelope"></i>
							</a>
							<ul class="dropdown-menu messages-notif-box animated fadeIn" aria-labelledby="messageDropdown">
								<li>
									<div class="dropdown-title d-flex justify-content-between align-items-center">
										消息 									
										<a href="#" class="small">全部标记已读</a>
									</div>
								</li>
								<li>
									<div class="message-notif-scroll scrollbar-outer">
										<div class="notif-center">
											<a href="#">
												<div class="notif-img"> 
													<img src="../assets/img/chadengle.jpg" alt="Img Profile">
												</div>
												<div class="notif-content">
													<span class="subject">刘淑薇</span>
													<span class="block">
														我遇到了点问题
													</span>
													<span class="time">12分钟前</span> 
												</div>
											</a>
											<a href="#">
												<div class="notif-img"> 
													<img src="../assets/img/talha.jpg" alt="Img Profile">
												</div>
												<div class="notif-content">
													<span class="subject">鲁阳星</span>
													<span class="block">
														我今天请个假噢！
													</span>
													<span class="time">7天前</span> 
												</div>
											</a>
										</div>
									</div>
								</li>
								<li>
									<a class="see-all" href="javascript:void(0);">查看全部<i class="fa fa-angle-right"></i> </a>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="notifDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="fa fa-bell"></i>
								<span class="notification">3</span>
							</a>
							<ul class="dropdown-menu notif-box animated fadeIn" aria-labelledby="notifDropdown">
								<li>
									<div class="dropdown-title">三条新消息通知</div>
								</li>
								<li>
									<div class="notif-scroll scrollbar-outer">
										<div class="notif-center">
											<a href="#">
												<div class="notif-icon notif-primary"> <i class="fa fa-user-plus"></i> </div>
												<div class="notif-content">
													<span class="block">
														团队新成员加入
													</span>
													<span class="time">5天前</span> 
												</div>
											</a>
											<a href="#">
												<div class="notif-icon notif-success"> <i class="fa fa-comment"></i> </div>
												<div class="notif-content">
													<span class="block">
														有人评论了你
													</span>
													<span class="time">12天前</span> 
												</div>
											</a>
											<a href="#">
												<div class="notif-icon notif-danger"> <i class="fa fa-heart"></i> </div>
												<div class="notif-content">
													<span class="block">
														有人为你点赞
													</span>
													<span class="time">17天前</span> 
												</div>
											</a>
										</div>
									</div>
								</li>
								<li>
									<a class="see-all" href="javascript:void(0);">查看全部<i class="fa fa-angle-right"></i> </a>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
								<div class="avatar-sm">
									<img src="../assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
								</div>
							</a>
							<ul class="dropdown-menu dropdown-user animated fadeIn">
								<li>
									<div class="user-box">
										<div class="avatar-lg"><img src="../assets/img/profile.jpg" alt="image profile" class="avatar-img rounded"></div>
										<div class="u-text">
											<h4>黄家名</h4>
											<p class="text-muted">hhuchjm@hhu.edu.cn</p><a href="userprofile.html" class="btn btn-rounded btn-secondary btn-sm">个人资料</a>
										</div>
									</div>
								</li>
								<li>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="userprofile.html">我的个人信息</a>
									<a class="dropdown-item" href="setting.html">账户设置</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="index.html">退出登录</a>
								</li>
							</ul>
						</li>
						
					</ul>
				</div>
			</nav>
			<!-- End Navbar -->
		</div>

		<!-- Sidebar -->
		<div class="sidebar">
			
			<div class="sidebar-background"></div>
			<div class="sidebar-wrapper scrollbar-inner">
				<div class="sidebar-content">
					<div class="user">
						<div class="avatar-sm float-left mr-2">
							<img src="../assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
						</div>
						<div class="info">
							<a data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>
									黄家名
									<span class="user-level">管理员</span>
									<span class="caret"></span>
								</span>
							</a>
							<div class="clearfix"></div>

							<div class="collapse in" id="collapseExample">
								<ul class="nav">
									<li>
										<a href="userprofile.html">
											<span class="link-collapse">我的资料</span>
										</a>
									</li>
									<li>
										<a href="setting.html">
											<span class="link-collapse">设置</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<ul class="nav">
						<li class="nav-item">
							<a href="homepage.html">
								<i class="fas fa-home"></i>
								<p>主页</p>
								<span class="badge badge-count">5</span>
							</a>
						</li>
						<li class="nav-section">
							<span class="sidebar-mini-icon">
								<i class="fa fa-ellipsis-h"></i>
							</span>
							<h4 class="text-section">管理功能</h4>
						</li>
						<li class="nav-item active submenu">
							<a data-toggle="collapse" href="#base">
								<i class="fas fa-id-card-alt"></i>
								<p>员工管理</p>
								<span class="caret"></span>
							</a>
							<div class="collapse show" id="base">
								<ul class="nav nav-collapse">
									<li> 
										<a href="workerinfo.html">
											<span class="sub-item">员工信息</span>
										</a>
									</li>
									<li class="active">
										<a href="worktime.html">
											<span class="sub-item">工时统计</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="sub-item">备用</span>
										</a>
									</li>
								</ul>
							</div>
						</li>
						<li class="nav-item">
							<a data-toggle="collapse" href="#forms">
								<i class="fas fa-people-carry"></i>
								<p>工况管理</p>
								<span class="caret"></span>
							</a>
							<div class="collapse" id="forms">
								<ul class="nav nav-collapse">
									<li>
										<a href="condition.html">
											<span class="sub-item">工地环境</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="sub-item">备用</span>
										</a>
									</li>
								</ul>
							</div>
						</li>
						<li class="nav-item">
							<a data-toggle="collapse" href="#tables">
								<i class="fas fa-video"></i>
								<p>视频管理</p>
								<span class="caret"></span>
							</a>
							<div class="collapse" id="tables">
								<ul class="nav nav-collapse">
									<li>
										<a href="videoguide.html">
											<span class="sub-item">视频指导</span>
										</a>
									</li>
									<li>
										<a href="videolog.html">
											<span class="sub-item">视频日志</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="sub-item">备用</span>
										</a>
									</li>
								</ul>
							</div>
						</li>
						<li class="nav-item">
							<a data-toggle="collapse" href="#maps">
								<i class="fas fa-smile-beam"></i>
								<p>备用</p>
								<span class="caret"></span>
							</a>
							<div class="collapse" id="maps">
								<ul class="nav nav-collapse">
									<li>
										<a href="#">
											<span class="sub-item">备用</span>
										</a>
									</li>

									
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- End Sidebar -->
		<div class="main-panel">
			<div class="content">
				<div class="page-inner">
					<div class="page-header">
						<h4 class="page-title">工时统计</h4>
						<ul class="breadcrumbs">
							<li class="nav-home">
								<a href="#">
									<i class="flaticon-home"></i>
								</a>
							</li>
							<li class="separator">
								<i class="flaticon-right-arrow"></i>
							</li>
							<li class="nav-item">
								<a href="#">员工管理</a>
							</li>
							<li class="separator">
								<i class="flaticon-right-arrow"></i>
							</li>
							<li class="nav-item">
								<a href="#">工时统计</a>
							</li>
						</ul>
					</div>
					<div class="row">

						<div class="col-md-12">
							<div class="card">
								<div class="card-header">
									<h4 class="card-title">工时统计表</h4>
								</div>
								<div class="card-body">
									<div class="table-responsive">
										<table id="multi-filter-select" class="display table table-striped table-hover" >
											<thead>
												<tr>
													<th>姓名</th>
													<th>安全帽编号</th>
													<th>上班时间</th>
													<th>打卡开始</th>
													<th>打卡结束</th>
													<th>本月工作天数</th>
													<th>总工时</th>
												</tr>
											</thead>
											<tfoot>
												<tr>
													<th>姓名</th>
													<th>安全帽编号</th>
													<th>上班时间</th>
													<th>打卡开始</th>
													<th>打卡结束</th>
													<th>本月工作天数</th>
													<th>总工时</th>
												</tr>
											</tfoot>
											<tbody>
												<tr>
													<td>黄家名</td>
													<td>10001</td>
													<td>09：00-17：00</td>
													<td>08：55</td>
													<td>17：10</td>
													<td>11</td>
													<td>359h</td>
												</tr>
												<tr>
													<td>刘淑薇</td>
													<td>10002</td>
													<td>09：00-17：00</td>
													<td>08：50</td>
													<td>17：30</td>
													<td>11</td>
													<td>415h</td>
												</tr>
												<tr>
													<td>鲁阳星</td>
													<td>10003</td>
													<td>09：00-17：00</td>
													<td>08：54</td>
													<td>17：02</td>
													<td>11</td>
													<td>409h</td>
												</tr>
												<tr>
													<td>张小四</td>
													<td>10004</td>
													<td>09：00-17：00</td>
													<td>08：30</td>
													<td>18：02</td>
													<td>11</td>
													<td>440h</td>
												</tr>
												<tr>
													<td>赵晓五</td>
													<td>10005</td>
													<td>09：00-17：00</td>
													<td>08：40</td>
													<td>17：32</td>
													<td>11</td>
													<td>430h</td>
												</tr>
												<tr>
													<td>王大六</td>
													<td>20001</td>
													<td>07：30-18：00</td>
													<td>07：20</td>
													<td>18：32</td>
													<td>10</td>
													<td>1030h</td>
												</tr>
												<tr>
													<td>钱小琪</td>
													<td>20002</td>
													<td>07：30-18：00</td>
													<td>07：20</td>
													<td>18：32</td>
													<td>11</td>
													<td>1430h</td>
												</tr>
												<tr>
													<td>孙晓巴</td>
													<td>20003</td>
													<td>07：30-18：00</td>
													<td>07：24</td>
													<td>18：12</td>
													<td>11</td>
													<td>1401h</td>
												</tr>
												<tr>
													<td>周达鹫</td>
													<td>20004</td>
													<td>07：30-18：00</td>
													<td>07：28</td>
													<td>18：02</td>
													<td>11</td>
													<td>1351h</td>
												</tr>
												<tr>
													<td>吴时</td>
													<td>20005</td>
													<td>07：30-18：00</td>
													<td>07：11</td>
													<td>18：01</td>
													<td>11</td>
													<td>1291h</td>
												</tr>
												<tr>
													<td>郑史奕</td>
													<td>20006</td>
													<td>07：30-18：00</td>
													<td>07：21</td>
													<td>17：52</td>
													<td>11</td>
													<td>1389h</td>
												</tr>
												<tr>
													<td>汪拾贰</td>
													<td>20007</td>
													<td>07：30-18：00</td>
													<td>07：31</td>
													<td>18：24</td>
													<td>9</td>
													<td>1356h</td>
												</tr>
												<tr>
													<td>秦时散</td>
													<td>20008</td>
													<td>07：30-18：00</td>
													<td>07：14</td>
													<td>18：42</td>
													<td>11</td>
													<td>1501h</td>
												</tr>
												<tr>
													<td>方世思</td>
													<td>30001</td>
													<td>07：30-18：00</td>
													<td>07：34</td>
													<td>18：09</td>
													<td>10</td>
													<td>1430h</td>
												</tr>
												<tr>
													<td>程诗舞</td>
													<td>30002</td>
													<td>07：30-18：00</td>
													<td>07：30</td>
													<td>18：00</td>
													<td>11</td>
													<td>1412h</td>
												</tr>
												<tr>
													<td>李师鎏</td>
													<td>30003</td>
													<td>07：30-18：00</td>
													<td>07：29</td>
													<td>18：14</td>
													<td>11</td>
													<td>1423h</td>
												</tr>
												<tr>
													<td>徐世奇</td>
													<td>30004</td>
													<td>07：30-18：00</td>
													<td>07：26</td>
													<td>18：52</td>
													<td>10</td>
													<td>1383h</td>
												</tr>
												<tr>
													<td>何始坝</td>
													<td>30005</td>
													<td>07：30-18：00</td>
													<td>07：13</td>
													<td>18：04</td>
													<td>10</td>
													<td>1395h</td>
												</tr>
												<tr>
													<td>马时旧</td>
													<td>30006</td>
													<td>07：30-18：00</td>
													<td>07：00</td>
													<td>18：09</td>
													<td>9</td>
													<td>1399h</td>
												</tr>
												<tr>
													<td>唐迩事</td>
													<td>30007</td>
													<td>07：30-18：00</td>
													<td>07：15</td>
													<td>18：05</td>
													<td>11</td>
													<td>1388h</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		
		<!-- Custom template | don't include it in your project! -->
		<div class="custom-template">
			<div class="title">设置</div>
			<div class="custom-content">
				<div class="switcher">
					<div class="switch-block">
						<h4>导航栏颜色</h4>
						<div class="btnSwitch">
							<button type="button" class="changeMainHeaderColor" data-color="blue"></button>
							<button type="button" class="changeMainHeaderColor" data-color="purple"></button>
							<button type="button" class="changeMainHeaderColor" data-color="light-blue"></button>
							<button type="button" class="changeMainHeaderColor" data-color="green"></button>
							<button type="button" class="selected changeMainHeaderColor" data-color="orange"></button>
							<button type="button" class="changeMainHeaderColor" data-color="red"></button>
						</div>
					</div>
					<div class="switch-block">
						<h4>背景颜色</h4>
						<div class="btnSwitch">
							<button type="button" class="changeBackgroundColor" data-color="bg2"></button>
							<button type="button" class="changeBackgroundColor selected" data-color="bg1"></button>
							<button type="button" class="changeBackgroundColor" data-color="bg3"></button>
						</div>
					</div>
				</div>
			</div>
			<div class="custom-toggle">
				<i class="flaticon-settings"></i>
			</div>
		</div>
		<!-- End Custom template -->
	</div>
	<!--   Core JS Files   -->
	<script src="../assets/js/core/jquery.3.2.1.min.js"></script>
	<script src="../assets/js/core/popper.min.js"></script>
	<script src="../assets/js/core/bootstrap.min.js"></script>
	<!-- jQuery UI -->
	<script src="../assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
	<script src="../assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
	<!-- Bootstrap Toggle -->
	<script src="../assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
	<!-- jQuery Scrollbar -->
	<script src="../assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
	<!-- Datatables -->
	<script src="../assets/js/plugin/datatables/datatables.min.js"></script>
	<!-- Azzara JS -->
	<script src="../assets/js/ready.min.js"></script>
	<!-- Azzara DEMO methods, don't include it in your project! -->
	<script src="../assets/js/setting-demo.js"></script>
	<script>
		$(document).ready(function() {
			$('#basic-datatables').DataTable({
			});

			$('#multi-filter-select').DataTable( {
				"pageLength": 5,
				initComplete: function () {
					this.api().columns().every( function () {
						var column = this;
						var select = $('<select class="form-control"><option value=""></option></select>')
						.appendTo( $(column.footer()).empty() )
						.on( 'change', function () {
							var val = $.fn.dataTable.util.escapeRegex(
								$(this).val()
								);

							column
							.search( val ? '^'+val+'$' : '', true, false )
							.draw();
						} );

						column.data().unique().sort().each( function ( d, j ) {
							select.append( '<option value="'+d+'">'+d+'</option>' )
						} );
					} );
				}
			});

		});
	</script>
</body>
</html>